<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .content {
            margin: 0 auto;
            width: 940px;
            padding-top: 25px;
        }

        body, html {
            height: 100%;
        }

        .inside-content {
            min-height: 87%;
            width: 100%;
        }

        .footer {
            text-align: right;
        }
        .close{
            text-decoration: none;
        }
        .login-link{
            float: right;
            padding-right: 20px;
        }
        .login-link a{
            text-decoration: none;
            color:#eee;
        }
        .login-link a:hover{
            text-decoration: underline;
            color:#1abc9c;
        }
    </style>
    <script type="text/javascript">
        var productid = null;
        $(function () {
            var href = location.href;
            var id = href.substring(href.lastIndexOf('#')+1);
            debugger;
            if(!isNaN(id)){
                $(".inside-content").attr("src", "apis.html?apid="+id);
            }
            $("a").click(function () {
                var page = $(this).attr("page");
                if (undefined == page) {
                    return;
                }
                $(".inside-content").attr("src", page);
                if (page == "main.html") {
                    $("#apis").removeClass("active");
                    $("#link-nav").addClass("active");
                } else {
                    $("#apis").addClass("active");
                    $("#link-nav").removeClass("active");
                }
            });
            $("#new-product-add").click(function () {
                var name = $("#new-product-name").val();
                if (name == "") {
                    alert("请输入产品线名称！");
                    return false;
                }

                $.ajax({
                    url: 'product/new.do',
                    type:'post',
                    data: {name: name},
                    success: function () {
                        location.href='index.html';
                    },
                    error: function () {
                        alert("Sorry 出错了，请稍后再试。。。");
                    }
                });
            });

            $('a[href="#newAPI"]').click(function(){
                productid = $(this).attr("productid");
            });
            $("#new-api-add").click(function(){
                var data = {};
                data.title = $("#new-api-name").val();
                data.resp = $("#new-api-resp").val();
                data.detail = $("#new-api-desc").val();
                data.productid = productid;
                debugger
                if(data.title == ""){
                    alert("请输入API Title！");
                    $("#new-api-name").focus();
                    return false;
                }else if (data.resp == "") {
                    alert("请输入API 返回值!");
                    $("#new-api-resp").focus();
                    return false;
                };
                $.ajax({
                     url:'api/new.do',
                     type:'post',
                     data:data,
                     dataType:'text',
                     success:function(rs){
                         location.href='index.html#'+rs;
                         location.reload();
                     },
                     error:function(){
                         alert("Sorry 出错了，请稍后再试。。。");
                     }
                });
            });
        });
        function dyniframesize(down) {
            var pTar = null;
            if (document.getElementById) {
                pTar = document.getElementById(down);
            }
            else {
                eval('pTar = ' + down + ';');
            }
            if (pTar && !window.opera) {
                //begin resizing iframe
                pTar.style.display = "block"
                if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
                    //ns6 syntax
                    pTar.height = pTar.contentDocument.body.offsetHeight + 20;
                    pTar.width = pTar.contentDocument.body.scrollWidth + 20;
                }
                else if (pTar.Document && pTar.Document.body.scrollHeight) {
                    //ie5+ syntax
                    pTar.height = pTar.Document.body.scrollHeight;
                    pTar.width = pTar.Document.body.scrollWidth;
                }
            }
        }
    </script>
</head>
<body>
<div class="content ">
    <div class="row">
        <div class="span12">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <div class="login-link">
                        <a href="login.html">Login</a>
                        <a href="login.html" style="display: none">Logout</a>
                    </div>
                    <div class="container">
                        <div class="nav-collapse collapse">
                            <ul class="nav">
                                <li class="active" id="link-nav"><a href="#main" page="main.html">Main</a></li>
                                <li id="apis"><a href="#apis" page="lapi.html">API Docs</a>
                                    <ul>
                                    <#list plist as product>
                                        <li><a href="#apis">${product.name} >></a>
                                            <ul>
                                                <#list product.apis as api>
                                                    <li><a href="#${api.id}"
                                                           page="apis.html?apid=${api.id}">${api.title}</a></li>
                                                </#list>
                                                <a productid="${product.id}" data-toggle="modal" href="#newAPI" class="btn btn-large"><span
                                                        class="fui-plus-16"></span> Add New</a>
                                            </ul>
                                        </li>
                                    </#list>
                                        <a data-toggle="modal" href="#myModal" class="btn btn-large"><span
                                                class="fui-plus-16"></span> Add New</a>
                                    </ul>
                                </li>
                                <li><a href="#">Issue List</a></li>
                                <li><a href="#">About Us</a></li>
                                <li><a href="#comming_soon...">Comeing Soon...</a></li>
                            </ul>
                        </div>
                        <!--/.Nav-collapse -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <iframe src="main.ftl" class="inside-content" frameborder="0" scrolling="auto" id="ifm"
                onload="javascript:dyniframesize('ifm');"></iframe>
    </div>
    <div class="footer">Powered By <i class="icon-star"></i>FC-star <a href="#" page="readme.html">Change Log</a></div>
</div>
<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>

        <h3>Add New Product Line</h3>
    </div>
    <div class="modal-body">
        <input type="text" id="new-product-name" name="pname" placeholder="Product Line Name" style="width:96%">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Give Up</a>
        <a href="#" id="new-product-add" class="btn btn-primary">Save</a>
    </div>
</div>

<div id="newAPI" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Add New API</h3>
    </div>
    <div class="modal-body" style="max-height: 600px">
        <input type="text" id="new-api-name" name="aname" placeholder="API title goes here" style="width:96%">
        <textarea name="aresp" id="new-api-resp" style="min-height: 250px;width: 96%" placeholder="API response goes here"></textarea>
        <textarea name="adesc" id="new-api-desc" style="min-height: 60px;width: 96%" placeholder="API description goes here"></textarea>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Give Up</a>
        <a href="#" id="new-api-add" class="btn btn-primary">Save</a>
    </div>
</div>
</body>
</html>